<template>
  <div class="bg-rose-50 py-10">
    <div class="w-4/5 bg-white my-0 mx-auto rounded-xl">
      <h2 class="font-bold text-2xl tracking-widest p-6 text-rose-500">订单管理></h2>
      <v-table class="mx-8 text-center">
        <thead class="text-xl">
          <tr>
            <th class="text-left">商品</th>
            <th class="text-left">规格</th>
            <th class="text-center w-24">数量</th>
            <th class="text-center w-24">实付款</th>
            <th class="text-center w-32">付款时间</th>
            <th class="text-center w-32">发货时间</th>
            <th class="text-center w-28">操作</th>
          </tr>
        </thead>
        <tbody class="text-base">
          <tr v-for="i in item">
            <td class="text-left">
              <img class="inline-block w-24 h-24 my-5" :src="'http://127.0.0.1:8081' + i.productImage">
              <div class="inline-block mx-5">{{ controlTitle(i.productName) }}</div>
            </td>
            <td class="text-left">{{ i.specName }}</td>
            <td>{{ i.amount }}</td>
            <td>{{ i.price }}</td>
            <td>{{ i.createTime }}</td>
            <td>{{ i.sendTime }}</td>
            <td>
              <div>
                <button
                  class="w-20 h-10 hover:bg-rose-300 hover:text-white rounded-lg text-stone-500  border-2 border-solid border-rose-300 hover:border-rose-300 block"
                  v-if="i.status !== '已收货'" @click="updateOrderItemReceipt(i.id)">{{ i.status }}</button>
                <button class="w-20 h-10 bg-rose-300 text-white rounded-lg block" v-else disabled>{{ i.status }}</button>
                <button @click="goComment(i.productId)"
                  class="w-20 h-10 mt-5 hover:bg-rose-300 hover:text-white rounded-lg text-stone-500 border-2 border-solid border-rose-200 hover:border-rose-300">评论</button>
              </div>
            </td>
          </tr>
        </tbody>
      </v-table>
    </div>
  </div>
</template>
 
<script>
import axios from 'axios'
export default {
  data() {
    return {
      aid: '',
      status: true,
      get: '',
      item: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/selectOrdersByUserId',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          userName: window.localStorage.getItem( "userName" ),
        }
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/login' )
        } else {
          this.item = res.data.data.ordersInfoList
        }
      } )
    },
    //标题截取
    controlTitle( str ) {
      if ( str.length > 45 ) {
        str = str.slice( 0, 45 ) + '...'
      }
      return str
    },
    // 评论跳转
    goComment( i ) {
      this.$router.push( {
        name: 'pid',
        query: { pid: i }
      } )
    },
    // 收货
    updateOrderItemReceipt( i ) {
      axios( {
        url: 'http://127.0.0.1:8081/api/updateOrderItemReceipt',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          id: i
        }
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/login' )
        } else {
          this.$message.success( res.data.message )
          location.reload()
        }
      } )
    },


  }

}
</script>
 
<style scoped ></style>